<template>
  <div class="flc">
    <div class="h-12px w-30px flc items-end">
      <div class="g-item"></div>
      <div class="g-item"></div>
      <div class="g-item"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$count: 3;
$speed: 1s;

.g-item {
  @apply w-4px bg-[#4673EE] rounded-2px mx-1px;
  --f: #{calc($speed / -3)};
  animation: heightChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {
  .g-item:nth-child(#{$i + 1}) {
    animation-delay: calc(var(--f) * #{$i});
  }
}

@keyframes heightChange {
  from {
    height: 3px;
  }

  to {
    height: 12px;
  }
}
</style>

